<template>
  <div>
    <el-dialog title="肥料购买登记" :visible.sync="dialogFormVisible">
      <el-form :model="form"
        v-loading="fetchLoading"
        class="sectionForm"
        size="mini"
        element-loading-text="数据加载中,请耐心等待..."
        label-width="80px"
        label-position="right"
    >
        <el-row >
          <el-col :span="12">
            <el-form-item label="购买序号">
              <el-input v-model="form.plantSerialNum" autocomplete="off" size="mini"  placeholder="购买序号"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肥料编号">
              <el-input v-model="form.plantNum" autocomplete="off" size="mini"  placeholder="肥料编号"></el-input>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="肥料名称">
              <el-input v-model="form.plantName" autocomplete="off" size="mini"  placeholder="肥料名称"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属类别">
              <el-select v-model="form.plantType" placeholder="所属类别" style="width:100%">
                <el-option v-for="item in plantTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                <!-- <el-option label="有机肥料" value=0></el-option>
                <el-option label="无机肥料" value=1></el-option> -->
              </el-select>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="购买数量">
              <el-input v-model="form.plantQuantity" autocomplete="off" size="mini"  placeholder="购买数量(公斤)"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肥料单价">
              <el-input v-model="form.plantUnitPrice" autocomplete="off" size="mini" @blur="change"  placeholder="肥料单价(元)"></el-input>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="购买总额">
              <el-input v-model="form.plantTotalPrice" autocomplete="off" size="mini"  disabled placeholder="购买总额(元)"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购买日期">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.plantDate" style="width: 100%;"></el-date-picker>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="购买地点">
              <el-input v-model="form.plantAddress" autocomplete="off" size="mini"  placeholder="购买地点"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产地厂商">
              <el-input v-model="form.plantFactory" autocomplete="off" size="mini"  placeholder="产地厂商"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确认添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default{
  name:'add',
  props:{
    type:String
  },
  data(){
    return {
      dialogFormVisible:false,
      fetchLoading: false,
      form: {
        plantSerialNum: '',
        plantNum: '',
        plantName: '',
        plantType: null,
        plantQuantity: '',
        plantUnitPrice: '',
        plantTotalPrice: '',
        plantDate:'',
        plantAddress: '',
        plantFactory: '',
        remark: '',
      },
      plantTypeList: [
        {label: '有机肥料', value: 0},
        {label: '无机肥料', value: 1}
      ]
    }
  },
  methods:{
    change(){
      console.log(123)
      this.form.plantTotalPrice=this.form.plantUnitPrice*this.form.plantQuantity
      // this.form.totalCost=this.form.money+this.form.cost
    },
    cancel(){
      this.dialogFormVisible = false
      Object.assign(this.$data.form, this.$options.data().form)
    },
    async add(){
      this.dialogFormVisible = false
      // this.$emit("save",)
      try{
        let res=await this.$API.manurePur.saveOrUpdate(this.form)
        if(res.code==200){
          this.$message({type:"success",message:this.type==="add"?"添加成功":"修改成功"})
          this.$parent.updatePageList()
          Object.assign(this.$data.form, this.$options.data().form)
        }
      }catch{
        this.$message({type:"error",message:this.type==="add"?"添加失败":"修改失败"})
      }
    }
  }
}
</script>

<style scoped>
</style>